<template>
    <div class="head">
        <div class="title">
            <div class="name">{{ selfInfo.seekersName }}</div>
            <div class="jobexp">求职意向：{{ expJob }}</div>
        </div>
        <div class="selfInfomation">
            <div class="age">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dangao"></use>
                </svg>
                {{ selfInfo.age }}
            </div>
            <div class="phone">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dianhua"></use>
                </svg>
                {{ selfInfo.phone }}
            </div>
            <div class="education">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xueshimao"></use>
                </svg>
                {{ selfInfo.education }}
            </div>
            <div class="email">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-youxiang"></use>
                </svg>
                {{ selfInfo.email }}
            </div>
            <div class="profession">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tushu"></use>
                </svg>
                {{ selfInfo.profession }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        selfInfo: {
            type: Object,
            required: true,
        },
        expJob: {
            type: String,
            required: true,
        },
    },
    data() {
        return {

        }
    },
    mounted() {
        console.log(this.expJob);
        console.log(this.$store.state.expJob);
    },
    methods: {

    }
}
</script>
<style scoped>
.icon {
    width: 4em;
    height: 4em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 7px;
}

.title {
    border-bottom: 1px solid grey;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.name {
    font-size: 22px;
    font-weight: 500;
}

.jobexp {
    margin-left: 300px;
}

.selfInfomation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.selfInfomation>* {
    margin-right: 24vw;
}

.profession {
    margin-left: -7vw;
}
</style>